<template>
  <div class="changepwd">
    <el-form
      :model="changeForm"
      :rules="changeFormRules"
      ref="changeFormRef"
      label-width="130px"
    >
      <el-form-item label="原密码" prop="input1">
        <el-input v-model="changeForm.input1"></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="input2">
        <el-input
          v-model="changeForm.input2"
          type="password"
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item label="重复密码" prop="input3">
        <el-input
          v-model="changeForm.input3"
          type="password"
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" @click="changePassword">提交修改</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    // 验证旧密码的规则
    var checkOldPassword = (rule, value, cb) => {
      if (value !== this.oldPassword) {
        // 返回一个错误提示
        cb(new Error('密码与原密码不符'))
      }
      cb()
    }
    // 验证重复密码
    var checkRepeatPassword = (rule, value, cb) => {
      if (value !== this.changeForm.input2) {
        // 返回一个错误提示
        cb(new Error('重复密码与新密码不符'))
      }
      cb()
    }
    return {
      changeForm: {},
      oldPassword: '',
      changeFormRules: {
        input1: [
          { required: true, message: '原密码不能为空', trigger: 'blur' },
          {
            validator: checkOldPassword,
            message: '密码与原密码不符',
            trigger: 'blur'
          }
        ],
        input2: [
          { required: true, message: '新密码不能为空', trigger: 'blur' },
          {
            min: 6,
            max: 15,
            message: '密码在6~15个字符之间',
            trigger: 'blur'
          }
        ],
        input3: [
          { required: true, message: '重复密码不能为空', trigger: 'blur' },
          {
            validator: checkRepeatPassword,
            message: '重复密码与新密码不符',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created() {
    this.getOldPassword()
  },
  methods: {
    async getOldPassword() {
      const { data: res } = await this.$http.get(
        '/user/getUserByName' + '/' + this.getUser
      )
      console.log(res)
      this.oldPassword = res.data.password
    },
    changePassword() {
      this.$refs.changeFormRef.validate(async valid => {
        console.log(valid)
        if (valid === false) return
        console.log(111)
        const { data: res } = await this.$http.post('/user/changePwd', {
          password: this.changeForm.input2,
          username: this.getUser
        })
        if (res.code !== 200) return this.$message.error('修改密码失败')
        this.$message.success('修改密码成功')
        this.$refs.changeFormRef.resetFields()
      })
    }
  },
  computed: {
    ...mapGetters('user', ['getUser'])
  }
}
</script>

<style lang="scss" scoped>
.changepwd {
  .el-button {
    background-color: rgb(210, 172, 107);
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    border-radius: 0px;
  }
  .el-input {
    width: 300px;
  }
}
</style>
